<template>
	<div class="app">
		<div style="position: fixed;top:0;" v-if="headerType == true">
			<div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
			<navbar class="navbar" :style="{backgroundColor: 'white' }">
				<navbar-item type="left" @click="backClick">
					<text class="iconLeft">&#xe659;</text>
				</navbar-item>
				<navbar-item type="title">
					<div class="top_nav">
						<div style="padding-left:10px;padding-right:10px;" v-for="(item,index) in nav" @click="toScroll(index)" :key="item">
							<text style="font-size: 32px" :class="[navId==index?'naved':'nav']">{{item}}</text>
						</div>
					</div>
				</navbar-item>
			</navbar>
		</div>
		<div :style="{height:marginHeight}"></div>
		<scroll-view ref="myScroll" class="scroller" @scrolled="scrolledClick($event)">

			<div style="width: 750px;height: 1px">
			</div>
			<scroll-header @stateChanged="stateChanged(0, $event)"></scroll-header>
			<div class="details_swiper">
				<slider class="slider" interval="3000" auto-play="true" @change="changeHandler">
					<div class="frame" v-for="img in swiperImg">
						<image class="image" resize="cover" :src="img"></image>
					</div>
				</slider>
				<div class="details_progress">
					<text class="details_progress_title">{{current}}/{{swiperIndex}}</text>
				</div>
				<div style="position: fixed;top:0">
					<div :style="{height:statusBarHeight + 'px'}"></div>
					<div @click="backClick" class="return">
						<div class="returnContent">
							<text class="iconback">&#xe659;</text>
						</div>
					</div>
				</div>
			</div>
			<div style="position: relative">
				<div class="details_price_box details_bg_color">
					<div class="details_price">
                    <text class="details_price_title">¥{{groupprice}}</text>
					</div>
				</div>
                		<div class="details_content">

					<text class="details_content_title">{{product.name}}</text>
					<text class="details_content_subtitle">{{product.subTitle}}</text>
				</div>
			</div>
			<scroll-header @stateChanged="stateChanged(1, $event)"></scroll-header>
			<scroll-header @stateChanged="stateChanged(2, $event)"></scroll-header>
			<div class="details_details_header">
				<!--<div v-if="content !=''" style="display: flex; flex-direction: row; justify-content: center;align-items: center;">-->
<!--					<div class="details_details_header_line"></div>-->
<!--					<text class="iconfont icon-set details_details_header_icon"></text>-->
<!--					<text class="details_details_header_title">详情</text>-->
<!--					<div class="details_details_header_line"></div>-->
				<!--</div>-->
			</div>
			<html style="padding-left: 20px;padding-right: 20px;" :content="content" :imgWidth="750"></html>
			<!-- <html :content="content" :imgWidth="750"></html>
			<div class="details_details_header" v-if="productList.length>0">
				<div class="details_details_header_line"></div>
				<text class="details_details_header_title">为你推荐</text>
				<div class="details_details_header_line"></div>
			</div> -->
			<!-- <div class="details_produce" v-if="productList.length>0">
				<div v-for="item in productList">
					<column :product="item"></column>
				</div>
			</div> -->
			<div style="width: 750px;height:100px"></div>

		</scroll-view>
		<div class="details_botton">
			<div class="details_left_botton flex">
				<div class="details_left_column" @click="indexClick">
					<text class="details_left_column_icon">&#xe853;</text>
					<text class="details_left_column_title">首页</text>
				</div>
				<div class="details_left_column" @click="favoritesClick">
					<text class="details_left_column_icon" v-if="existsType==0">&#xe623;</text>
					<text class="favoritesColor" v-if="existsType==1">&#xe64d;</text>
					<text class="details_left_column_title">收藏</text>
				</div>
				<div class="details_left_column" @click="customClick">
					<text class="details_left_column_icon">&#xe60e;</text>
					<text class="details_left_column_title">客服</text>
				</div>
			</div>
			<div style="width:400px;margin-right:20px;display:flex;flex-direction: row;justify-content: flex-end;align-items: center;">
				<!-- <div v-if="stockBox > 0 && product.isMarketable == true" class="details_botton_left details_food_left_color" @click="showCarrame">
					<text class="details_botton_title details_food_fz_color">加入购物车</text>
				</div> -->
				<div v-if="stockBox > 0 && product.isMarketable == true || product.isMarketable == false" class="details_botton_right details_food_right_color"
				 @click="submitClick">
<!--					<text class="details_botton_title details_food_fz_color">立即参团</text>-->
          <text class="details_botton_title details_food_fz_color">立即参加</text>
        </div>
<!--				<div v-if="product.isMarketable == false" class="details_botton_no">-->
<!--					<text class="details_botton_title">已下架</text>-->
<!--				</div>-->
				<div v-if="stockBox == 0 " class="details_botton_no">
					<text class="details_botton_title">暂无库存</text>
				</div>
			</div>
		</div>
		<bottomFrame :gouwuche='gouwuche' @selectedInfo="selectedInfo" ref="bottomFrame" productId="1"></bottomFrame>
		<address class="app" @cancleAddress="cancleAddress" @refreshClick="refreshClick" v-if="addressType==true"
		 @addressChoose="addressChoose" :addressInfo="addressInfo"></address>
		<coupon class="coupon" @cancleClick="cancleClick" v-if="couponType == true" :product="product"></coupon>
	</div>
</template>
<script>
	import {
		list,
		find
	} from '../../../api/product';
	import {
		buyNow,buyNowForGroupBuy
	} from '../../../api/cart';
	import {
		list as addressList
	} from '../../../api/address.js';
	import {
		add,
		exists,
		del
	} from '../../../api/memberFavorites.js'
	import {
		add as traceAdd
	} from '../../../api/trace.js'
	import {
		amap
	} from '../../../api/amap.js'
	import {
		freight
	} from '../../../api/freight.js'
	import {
		reviewList
	} from '../../../api/review.js'
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	const dom = weex.requireModule('dom')
	import bottomFrame from '../../../components/bottomFrame/bottomFrame.vue'
	import html from '../../../components/html/html.vue'
	import coupon from './component/coupon.vue'
	import address from './component/address.vue'
	import {
		WxcRichText,
		WxcSpecialRichText
	} from 'weex-ui';
	import column from '../../../components/product/column.vue'
  import {getInfo as mchGetInfo} from "../../../api/enterprise";
  import {
    getInfo
  } from '../../../api/enterprise';
  const communication = app.requireModule("eeui/communication");
	export default {
		data() {
			return {
                productType:"",
                groupId:"",
                groupprice:"",
                gouwuche:true,
				background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				swiperImg: [],
				swiperVideo: [],
				product: '',
				current: '1',
				nav: ['商品', '评价', '详情'],
				hiddenNav: true,
				navId: 0,
				couponType: false,
				addressType: false,
				id: '',
				content: '',
				pageNum: 0,
				pageSize: 10,
				productList: [],
				address: {
					areaName: '福建省',
					address: '厦门市',
					areaId: 350200
				},
				swiperIndex: 0,
				addressInfo: [],
				spec: '选择规格',
				freight: {},
				activity: [{}],
				marginHeight: '',
				secondsKill: [],
				couple: [],
				secondThing: [],
				priceBox: '',
				hoursData: '00',
				minutesData: '00',
				secondsData: '00',
				timer: {},
				commentsData: [],
				circular: {},
				existsType: 0,
				noMail: [],
				promotions: [],
				statusBarHeight: eeui.getStatusBarHeightPx(),
				headerType: false,
				couponData: [],
				stockBox: 0,
        timerData:null,
        mch: {phone:"4008001389"},
			}
		},
		components: {
			coupon,
			WxcRichText,
			WxcSpecialRichText,
			html,
			address,
			bottomFrame,
			myNavbar,
			column
		},
		created() {
            console.info("88888888888888888888888888888888888888888888888888888888888888");
            console.log(app.config.params);
			this.initIconFont()
			this.id = app.config.params.productId
            this.groupId=app.config.params.groupId
            console.info(this.groupId)
            this.productType=app.config.params.productType
            this.groupprice=app.config.params.priceBox
			this.findClick()
			this.loadReviewList()
			// this.loadPorduct()
			this.existsClick()
            this.getInfoClick()
		},
		mounted() {
			if (this.getGlobalData().token != null) {
				this.loadAddress()
			}
			if (this.getGlobalData().token == null) {
				this.amapClick()
			}
		},
		filters: {
			price(value) {
				var toFixedNum = Number(value).toFixed(3);
				var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
				return realVal;
			},
			number(value) {
				var toFixedNum = Number(value).toFixed(0);
				return toFixedNum;
			}
		},
		methods: {
			selectedInfo(data) {
				this.spec = data.spec
			},
			stateChanged(index, data) {
				if (data.status === "float") {
					this.navId = index
				}
			},
			showCarrame(e) {
				this.$refs.bottomFrame.showFrame(this.id, "addCart");
			},
			submitClick() {
                let _this=this
				if (this.getGlobalData().token == null) {
					eeui.openPage({
						url: 'root://pages/login/msgLogin.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					})
				} else {
					// this.$refs.bottomFrame.showFrame(this.id,"buyNow",this.productType,this.groupId);
                       let data = {
                            productId :this.id,
							uuid : _this.getGlobalData().uuid,
							groupBuyId:_this.groupId
							}
							buyNowForGroupBuy(data).then(
								res => {
									console.info("立即购买的请求--" + JSON.stringify(res))
									if (res.type == 'success') {
                                        let obj={
                                            groupId:this.groupId
                                        }
										eeui.openPage({
                                            params:obj,
                                            url: 'root://pages/goods/submit/index.js',
                                            statusBarType: 'immersion',
                                            statusBarStyle:false
                                        }, function (result) {});
									}
								}
							).catch(error => {
								console.info(error)
								eeui.toast({
									message: "服务器开小差了，请重新点击购买",

								});

							})

				}
			},
			customClick() {
               communication.call(this.mch.phone)
				// if (this.getGlobalData().token == null) {
				// 	eeui.openPage({
				// 		url: 'root://pages/login/msgLogin.js',
				// 		statusBarType: 'immersion',
				// 		statusBarStyle: false
				// 	})
				// } else {
				// 	eeui.toast('客服功能正在路上,敬请期待。')
				// }
			},
			favoritesClick() {
				var _this = this
				if (this.getGlobalData().token == null) {
					eeui.openPage({
						url: 'root://pages/login/msgLogin.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					})
				} else {
					if (_this.existsType == 0) {
						add({
							productId: _this.id,
							productType: 0,
						}).then(res => {
							_this.existsClick()
							eeui.toast('收藏成功')
						}).catch(error => {

						})
					} else {
						del(_this.id).then(res => {
							_this.existsClick()
							eeui.toast('取消成功')
						}).catch(error => {

						})
					}
				}
			},
			existsClick() {
				var _this = this
				exists({
					productId: _this.id
				}).then(res => {
					// eeui.toast(res.content)
					if (res.type == 'success') {
						_this.existsType = res.data
					}
				}).catch(error => {
					eeui.toast(error.content)
				})
			},
			indexClick() {
				// eeui.openPage({
				// 	url: 'root://pages/index.js',
				// 	statusBarType: 'immersion',
				// 	statusBarStyle: false
				// })
        eeui.closePage()
			},
			commentsClick() {
				eeui.openPage({
					url: 'root://pages/goods/product/comments.js',
					params: this.id,
					statusBarType: 'immersion',
					statusBarStyle: false

				})
			},
			loadReviewList() {
				var _this = this
				reviewList({
					productId: _this.id
				}).then(res => {
					console.info(res.data)
					if (res.type == 'success') {
						_this.commentsData = res.data.data
					}
				}).catch(error => {

				})
			},
			cancleClick() {
				this.couponType = false
			},
			couponClick() {
				this.couponType = true
			},
			addressClick() {
				this.addressType = true
			},
			cancleAddress() {
				this.addressType = false
			},
			addressChoose(data) {
				this.address = data
				this.addressType = false
				this.freightClick()
			},
			findClick() {
				var _this = this
				find(_this.id).then(
					res => {
						if (res.type == 'success') {
              console.log("1111111111111111111111111111321321321321")
              console.log(res)
              // eeui.toast('结束')
							_this.product = res.data.products[0];
							if (res.data.products.length > 0) {
								res.data.products.forEach(function(item) {
									_this.stockBox += Number(item.stock)
								})
							}
							if (!_this.isEmptyString(res.data.meta)) {
								if (!_this.isEmptyString(res.data.meta.images)) {
									res.data.meta.images.forEach(function(item){
										item = _this.thumbnail(item,750,750)
									})
									_this.swiperImg = res.data.meta.images;
								}
								if (!_this.isEmptyString(res.data.meta.video)) {
									_this.swiperVideo = res.data.meta.video;
								}
							}
              clearTimeout(this.timerData);  //清除延迟执行

              this.timerData = setTimeout(()=>{   //设置延迟执行
                if (!_this.isEmptyString(res.data.content)) {
                	//     const regex = new RegExp('<img', 'gi');
                	_this.content = res.data.content;
                	console.log("123321321321321321321321321321321")
                  console.log(_this.content)
                }
              },1000)

							if (_this.swiperVideo == '') {
								this.swiperIndex = _this.swiperImg.length
							} else {
								this.swiperIndex = _this.swiperImg.length + 1
							}
							// if (res.data.products.length > 1) {
							// 	var priceBox = []
							// 	res.data.products.forEach(function(item) {
							// 		priceBox.push(item.price)
							// 	})
							// 	var max = Math.max.apply(null, priceBox);
							// 	var min = Math.min.apply(null, priceBox);
							// 	_this.priceBox = min + '-' + max
							// } else {
							// 	_this.priceBox = res.data.products[0].price
							// }
							// _this.activity = []
							// if (!_this.isEmptyString(res.data.products[0].vipPrice)) {
							// 	if (res.data.products[0].vipPrice < res.data.products[0].price) {
							// 		var vipPrice = {
							// 			price: res.data.products[0].vipPrice,
							// 			type: '100',
							// 			title: 'vip'
							// 		}
							// 		_this.activity.push(vipPrice)
							// 	}
							// }
							if (!_this.isEmptyString(_this.product.promotions)) {
								_this.product.promotions.forEach(function(item) {
									if (item.type == '10' || item.type == '8') {
										_this.activity.push(item)
									}
									_this.activity.sort((a, b) => {
										return a.price - b.price
									})
								     if (item.type == '3' || item.type == '4' || item.type == '5' || item.type == '7'|| item.type == '9') {
								                _this.promotions.push(item)
								        }
								})
								if (!_this.isEmptyString(_this.activity)) {
									if (_this.activity[0].type == '8') {
										_this.countdownBox()
									}
								}
							}
							if (!_this.isEmptyString(_this.product.coupons)) {
								_this.product.coupons.forEach(function(item) {
									if (item.targetType == 0) {
										item.targetName = '通用券'
									} else if (item.targetType == 1) {
										item.targetName = '品牌券'
									} else if (item.targetType == 2) {
										item.targetName = '会员券'
									} else if (item.targetType == 3) {
										item.targetName = '分类券'
									} else if (item.targetType == 4) {
										item.targetName = '商品券'
									}
									if (item.scope == 0) {
										item.scopeName = '全场'
									} else if (item.scope == 1) {
										item.scopeName = '店内'
									} else if (item.scope == 2) {
										item.scopeName = '商城'
									}
								})
								_this.couponData = _this.product.coupons
							}
							// _this.traceClick()
						}
					}
				).catch(error => {
					console.log(error)
				})
			},
			//轮播指示灯
			changeHandler: function(e) {
				this.current = e.index + 1;
			},
			//获取客户地址
			loadAddress() {
				var _this = this
				addressList({
					mchId: this.getGlobalData().mchId
				}).then(res => {
					_this.addressInfo = res.data.data
					if (res.data.data.length > 0) {
						_this.address = res.data.data[0]
						_this.freightClick()
					} else {
						this.amapClick()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			amapClick() {
				var _this = this
				amap().then(res => {
					if (res.type == 'success') {
                        if (!_this.isNullOrUndefined(_this.address.areaId)) {
                            _this.address.address = res.data.address
                            _this.address.areaName = res.data.name
                            _this.address.areaId = res.data.areaId
                        }
						_this.freightClick()
					} else {
						_this.freightClick()
					}
				}).catch(error => {
					_this.freightClick()
				})
			},
			//计算运费
			freightClick() {
				var _this = this
				if (_this.isNullOrUndefined(_this.address.areaId)) {
				    return;
				}
				freight({
					areaId: _this.address.areaId,
					productId: _this.id
				}).then(res => {
					if (res.type == 'success') {
						_this.freight = res.data
					} else {
						console.log(res.content)
					}
				}).catch(error => {
					console.log(error.content)
				})
			},
			showBottomFrame: function(e) {
				this.$refs.bottomFrame.showFrame(this.id, "buyNow",this.productType,this.groupId);
			},
			scrolledClick(data) {
				var _this = this
				if (data.y < 200) {
					this.marginHeight = data.y / 2 + 'px'
				} else {
					this.marginHeight = 100 + 'px'
				}

				if (_this.headerType == false && data.y > 200) {
					_this.headerType = true
				} else if (_this.headerType == true && data.y < 200) {
					_this.headerType = false
				}
			},
			backClick() {
				eeui.closePage()
			},
			toScroll(index) {

				if (index == 0) {
					this.$refs.myScroll.scrollToPosition(0);
				} else if (index == 1) {
					this.$refs.myScroll.scrollToPosition(6);
				} else if (index == 2) {
					this.$refs.myScroll.scrollToPosition(8);
				}
			},
			loadPorduct() {
				var _this = this
				list({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					mchId: this.getGlobalData().mchId,
				}).then(
					res => {
            // console.log(res)
						if (res.type == 'success') {
							_this.productList = res.data.data
							_this.productList.forEach(function(item) {
								item.thumbnail = _this.thumbnail(item.thumbnail, 350, 360)
							})
						}
					}
				).catch(error => {
					console.log(error)
				})
			},
			refreshClick() {
				this.loadAddress()
			},
			// 释放定时器
			countdownBox() {
				var _this = this
				if (this.timer != null) {
					clearInterval(this.timer);
					this.timer = null;
				}
				this.timer = setInterval(function() {
					_this.timeFun()
				}, 1000)
			},
			// 倒计时
			timeFun() {
				console.log('123456')
				var _this = this;
				if (_this.activity[0].type == '8') {
					var leftTime = (new Date(_this.activity[0].endDate)) - (new Date()); //计算剩余的毫秒数
					var date = new Date(leftTime)
					var hours = date.getHours();
					if (hours > 0) {
						hours = (hours < 10 ? ('0' + hours) : hours) - 8;
					} else {
						hours = 0
					}
					var minutes = date.getMinutes();
					var seconds = date.getSeconds();
					minutes = minutes < 10 ? ('0' + minutes) : minutes;
					seconds = seconds < 10 ? ('0' + seconds) : seconds;
					var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
					_this.hoursData = hours + (days * 24);
					_this.minutesData = minutes;
					_this.secondsData = seconds;
				}
			},
      getInfoClick() {
        getInfo().then(res => {
              if (res.type == 'success') {
                this.mch = res.data
              }
            }
        ).catch(error => {
          console.log(error)
        })
      },
		}
	}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
    .app {
        flex: 1;
    }

    .app, body {
        background-color: rgba(248, 248, 248, 1);
    }

    .scroller {
        flex: 1;
    }

    .details_swiper {
        width: 750px;
        height: 750px;
        position: relative;
    }

    .slider {
        width: 750px;
        height: 750px;
    }


    .image {
        width: 750px;
        height: 750px;
    }

    .details_evaluation_header_right {
        display: flex;
        flex-direction: row;
    }

    .frame {
        width: 750px;
        height: 750px;
        position: relative;
    }

    .coupon {
        flex: 1;
    }

    .details_swiper {
        width: 750px;
        height: 750px;
        position: relative;
    }

    .swiper-item {

        width: 100%;
        height: 100%;
        background-color: red;
    }

    .details_progress {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 70px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

    .details_progress_title {
        font-size: 20px;
        color: white;
    }

    .details_price_box {
        width: 750px;
        height: 150px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: absolute;
        top: 0px;
    }

    .details_price {
        width: 750px;
        height: 100px;
        display: flex;
        flex-direction: row;
        /*justify-content: space-between;*/
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .details_price_left {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
    }

    .details_price_left_original {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .details_price_title {
        font-size: 40px;
        color: white;
        font-weight: 700;
    }

    .details_price_label {
        width: 60px;
        height: 30px;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        margin-left: 10px;
    }

    .details_price_label_title {
        font-size: 20px;
        color: rgba(236, 95, 88, 1);
    }

    .details_content {
        width: 710px;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 100px;
        z-index: 2;
        background-color: white;
        margin-left: 20px;
        border-radius: 10px;
    }

    .details_coupon_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        background-color: rgba(252, 147, 147, 0.2);
        border-radius: 10px;
        flex-wrap: wrap;
        overflow: hidden;
        height: 80px;
        padding-right: 130px;
        position: relative;
    }

    .details_coupon_left {
        border-radius: 6px;
        height: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
    }

    .details_coupon_left_title {
        font-size: 24px;
        color: rgba(236, 95, 88, 1);
        display: block;
    }

    .details_coupon_right {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        right: 20px;
    }

    .icon {
        color: rgba(236, 95, 88, 1);
        font-family: iconfont2;
        font-size: 26px;
        margin-bottom: 6px;
    }

    .details_coupon_right_title {
        font-size: 24px;
        color: rgba(236, 95, 88, 1);
        display: block;
    }

    .details_content_title {
        /*font-size: 28px;*/
      font-size: 32px;
      line-height: 50px;
        display: block;
        margin-top: 10px;
    }

    .details_content_subtitle {
        font-size: 24px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        margin-top: 10px;
    }

    .details_address_box {
        width: 710px;
        margin-left: 20px;
        background-color: white;
        margin-top: 80px;
        border-radius: 10px;
        padding: 20px;
        box-sizing: border-box;
    }

    .details_address {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .details_addressTwo {
        display: flex;
        flex-direction: row;

        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .details_address_right {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: 570px;
    }

    .details_address_title {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
        width: 100px;
    }

    .details_address_right_title {
        font-size: 24px;
        flex-wrap: wrap;
        width: 500px;
    }

    .details_address_icon {
        font-family: iconfont2;
        color: rgba(0, 0, 0, 0.3);
        font-size: 24px;
    }

    .details_address_content {
        display: flex;

        flex-direction: column;
        justify-content: space-between;

    }

    .details_evaluation {
        width: 710px;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        background-color: white;
        margin-top: 20px;
    }

    .details_evaluation_header {
        width: 670px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .details_evaluation_header_title {
        font-size: 30px;
        font-weight: 700;
    }

    . {
        width: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_evaluation_header_subtitle {
        font-size: 24px;
        color: rgba(236, 95, 88, 1);

    }

    .details_evaluation_header_icon {
        font-family: iconfont2;
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
    }

    .details_evaluation_content {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .details_evaluation_content_header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_evaluation_content_Img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }

    .details_evaluation_content_name {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        margin-left: 10px;
    }

    .details_evaluation_content_title {
        font-size: 24px;
        display: block;
        line-height: 40px;
        margin-top: 10px;
        text-overflow: ellipsis;
        lines: 2;
    }

    .details_details_header {
        width: 750px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_details_header_line {
        width: 100px;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .details_details_header_title {
        /*font-size: 24px;*/
        font-size: 32px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        margin-right: 10px;
    }

    .details_details_header_icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.3);
        display: block;
        margin-left: 10px;
    }

    .details_details_img {
        width: 750px;
    }

    .details_activity {
        width: 710px;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 20px;
        background-color: white;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .pd_t10 {
        padding-top: 10px;
    }

    .pd_b10 {
        padding-bottom: 10px;
    }

    .details_produce {
        width: 750px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    .top_nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .naved {
        color: red;
    }

    .nav {
        color: black;
    }

    .nav_Back {
        position: absolute;
        left: 26px;
        /* font-size: 38px; */
        line-height: 38px;
        /* color: #000; */
        padding-right: 100px
    }

    .returnBox {
        width: 66px;
        height: 66px;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        left: 20px;
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }


    .details_botton {
        position: fixed;
        display: flex;
        bottom: 0;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 750px;
        height: 100px;
        background-color: white;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .details_botton_right {
        width: 400px;
        height: 70px;
        background-image: linear-gradient(to right, rgba(236, 95, 88, 1), rgb(252, 147, 147));
        border-radius: 40px;
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;



    }

    .details_botton_right_no {
        width: 200px;
        height: 70px;
        background: #888888;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
    }

    .details_botton_left {
        width: 200px;
        height: 70px;
        background-image: linear-gradient(to right, rgba(236, 95, 88, 1), rgb(252, 147, 147));
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_botton_left_no {
        width: 200px;
        height: 70px;
        background: #888888;
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_botton_no {
        width: 400px;
        height: 70px;
        background-color: #888888;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_botton_title {
        font-size: 24px;
        /* color: white; */
    }

    .activity_box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .activity_label {

        height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		border-style: solid;
		border-width: 1px;
		border-color:rgba(236, 95, 88, 1) ;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        margin-right: 10px;
    }

    .activity_label_title {
        font-size: 16px;
        color: rgb(252, 147, 147);
    }

    .details_left_botton {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 330px;
        height: 100px;
    }

    .details_left_column {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        /* border: solid 1px slategrey; */
    }

    .details_left_column_icon {
        font-family: iconfont2;
        font-size: 38px;
    }

    .details_left_column_title {
        display: block;
        font-size: 22px;
        line-height: 40px;
    }

    .details_left_button {
        border: slategrey solid 1px;
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1; */
        z-index: 10;
        position: absolute;
        box-sizing: border-box;
        /* background-color: #fff; */
        opacity: 0;
        /* padding: 0px; */
        width: 100% !important;
        height: 100% !important;
    }

    rich-text image {
        width: 100%;
    }

    .details_price_oldTitle {
        font-size: 24px;
        margin-left: 10px;
        color: #f2f2f2;
        line-height: 70px;
        height: 60px;
        text-decoration: line-through;
    }

    .details_price_leftTwo {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .details_price_activity {
        font-size: 22px;
        color: white;
        font-weight: 700;
    }

    .details_price_secondsKill {
        padding-top: 6px;
        padding-bottom: 5px;
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.8);
        margin-left: 10px;
    }

    .details_price_secondsKill_title {
        font-size: 16px;
        color: rgba(236, 95, 88, 1);
    }

    .details_price_right {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .details_price_right_title {
        font-size: 22px;
        color: white;
        text-align: center;
    }

    .details_price_date {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
    }

    .details_price_date_titleBox {
        padding-top: 6px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_price_date_title {
        font-size: 20px;
        color: white;
    }

    .details_price_date_line {
        font-size: 30px;
        color: white;
        margin-left: 6px;
        margin-right: 6px;
        display: block;
        height: 40px;
        line-height: 36px;
    }

    .return {
        height: 100px;
        width: 160px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .returnContent {
        width: 70px;
        height: 70px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*position: absolute;*/
        /*left: -6px;*/
        margin-left: 10px;
        margin-right: 10px;
    }

    .returnIcon {
        /* font-size: 38px; */
        /* color: #000; */
        display: block;
        position: absolute;
        left: 12px;
    }

    .favoritesColor {
        font-family: iconfont2;
        color: #fc5157;
        font-size: 38px;
    }

    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
    .status-bar {
        background-color: white;
    }
    .iconLeft{
        color: black;
        font-size: 30px;
        padding-left: 30px;
        padding-right: 30px;
        font-family: iconfont2;
    }
    .iconback{
        color: black;
        font-size: 30px;
        font-family: iconfont2;
    }
    .column_product_marketPrice{
        font-size: 26px;
        color: rgba(0, 0, 0, 0.5);
        text-decoration: line-through;
        margin-left: 10px;
        /*margin-top: 9px;*/
        margin-bottom: 4px;
    }
	.activity_box_promotions {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  margin-left: 10px;
	}
    .activity_four{
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        overflow: hidden;
        flex-direction: row;
    }
    .activety_left{
        background-color: rgba(94, 74, 74, 1);
        padding-top:4px;
        padding-bottom:4px;
        padding-left:12px;
        padding-right:12px
    }
    .activity_left_title {
        font-size: 24px;
        color: rgba(247, 219, 194, 1);
        line-height: 32px;
        height: 32px;
        display: block;
    }
    .activity_right{
        padding-top:4px;
        padding-bottom:4px;
        padding-left:12px;
        padding-right:12px;
        background-color: rgba(247, 219, 194, 1);
    }
    .activity_right_title {
        font-size: 24px;
        color: rgba(94, 74, 74, 1);
        line-height: 32px;
        height: 32px;
        display: block;
    }
    .details_price_original_title{
        font-size: 24px;
        margin-left: 10px;
        height: 44px;
        line-height: 52px;
        color:#f2f2f2;
        text-decoration:line-through;
    }
    .details_price_original_stock{
        font-size: 26px;
        color: white;
        margin-left: 10px;
        height: 44px;
        line-height: 46px;
    }
    .secondsBox{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        width: 710px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .details_price_date_titleBoxTwo {
        width: 50px;
        padding-top: 6px;
        padding-bottom: 5px;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .details_evaluation_no{
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-width:1px ;
      border-top-style: solid;
      border-top-color: #f2f2f2;
      margin-top: 20px;
      padding-top: 40px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
    }
</style>
